<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>用户管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="../static/css/common.css">
    <link rel="stylesheet" href="../static/element-ui/lib/theme-chalk/index.css">
    <script type="text/javascript">
        var html = document.getElementsByTagName("html")[0];
        var w = document.documentElement.clientWidth || document.body.clientWidth;
        html.style.fontSize = w / 1366 + "px";
    </script>
    <script src="../static/js/vue.js"></script>
    <script src="../static/element-ui/lib/index.js"></script>
    <script src="../static/js/jquery-2.2.3.min.js"></script>
    <!--富文本资源文件-->
    <script type="text/javascript" charset="utf-8" src="../static/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="../static/ueditor.all.min.js"></script>
</head>
<body style="background-color:#f1f7fe;">
<div id="cus_IndexApp" v-cloak>
    <div>
        <el-button type="success" icon="fa fa-user-plus" size="mini" @click="add">&nbsp;新增</el-button>
        <el-input placeholder="请输入用户名" v-model="soMoreUserIpt.USERNAME" size="mini" class="top_divR"
                  clearable></el-input>
        <el-button size="mini" type="warning" style="background-color:#fd8c12;" @click="handleCurrentChange(1)">搜索
        </el-button>
    </div>
    <div class="cusMTable">
        <el-table :data="cusTableLstInit" style="width: 100%;"
                  :header-cell-style="{background:'#004d8c',color:'#FFFFFF','line-height':'50px',height:'50px'}">
            <el-table-column
                    prop="USERNAME"
                    label="用户名">
            </el-table-column>
            <el-table-column
                    prop="NAME"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="role_name"
                    label="角色">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.sex==1">男</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.sex==2">女</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系电话">
            </el-table-column>
            <el-table-column
                    prop="signature"
                    label="备注">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="primary" size="small">编辑</el-button>
                    <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align:right;">
            <el-pagination @current-change="handleCurrentChange" :current-page="pageInit.currentPage" :page-size="10"
                           layout="total, prev, pager, next, jumper" :total="pageInit.totalResult">
            </el-pagination>
        </div>
    </div>
    <el-dialog :title="titleName" :visible.sync="addNewCustomer" width="60%" top="5vh">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名">
                <el-input v-model="ruleForm.USERNAME"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="ruleForm.PASSWORD"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="ruleForm.NAME"></el-input>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="ruleForm.jurisdiction_manage_id" placeholder="请选择角色">
                    <el-option
                            v-for="item in classOptionsjurisdiction_manage_id"
                            :key="item.id"
                            :label="item.role_manage_role_name1"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="ruleForm.signature"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="margin-left:35%" @click="submitForm">立即保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script th:inline="javascript">
    var ue = null;
    var basePath = "/" + window.location.pathname.split("/")[1];
    let app = window.parent.App;
    new Vue({
        el: "#cus_IndexApp",
        data() {
            return {
                pageInit: {
                    currentPage: 1,
                },
                cusTableLstInit: [],
                soMoreUserIpt: {},
                addNewCustomer: false,
                ruleForm: {},
                titleName: "新增",
                classOptionsjurisdiction_manage_id: [],
                classOptions: [],
                userObj: [],
                tenantList: [],
                uploadUrl: basePath,
            }
        },
        mounted() {
            this.userObj = JSON.parse(localStorage.getItem("userInfo"));
            ;
            this.handleCurrentChange(1);
        },
        methods: {
            windowOpen(url) {
                window.open(url);
            },
            add() {
                this.titleName = "新增";
                this.ruleForm = {};
                this.addNewCustomer = true;
                this.getClassOptionsjurisdiction_manage_id();
            },
            edit(row) {
                this.titleName = "编辑";
                this.ruleForm = row;
                this.addNewCustomer = true;
                this.getClassOptionsjurisdiction_manage_id();
            },
            getClassOptionsjurisdiction_manage_id() {
                let that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/jurisdiction_manage/queryJurisdictionManageKey`,
                    data: {},
                    success: function (data) {
                        that.classOptionsjurisdiction_manage_id = data.data;
                    }
                })
            },
            submitForm() {
                let that = this;
                if (this.titleName == "新增") {
                    $.ajax({
                        type: "GET",
                        url: basePath + "/sys_user/addSysUserNo",
                        data: that.ruleForm,
                        success: function (res) {
                            console.log(res);
                            if (res.status == 0) {
                                that.addNewCustomer = false;
                                that.handleCurrentChange(1);
                            }
                        }
                    })
                } else {
                    $.ajax({
                        type: "GET",
                        url: basePath + "/sys_user/updateSysUser",
                        data: that.ruleForm,
                        success: function (res) {
                            if (res.status == 0) {
                                that.addNewCustomer = false;
                                that.handleCurrentChange(1);
                            }
                        }
                    })
                }
            },
            changeSearchFlag() {
                this.topSearchFlag = false;
            },
            handleCurrentChange(val) {
                this.loading = true;
                this.soMoreUserIpt.currentPage = val;
                let that = this;
                $.ajax({
                    type: "GET",
                    url: `${basePath}/sys_user/queryPageSysUserKeyList`,
                    data: that.soMoreUserIpt,
                    success: function (data) {
                        that.cusTableLstInit = data.rows;
                        that.pageInit.totalResult = data.total;
                        that.pageInit.currentPage = val;
                        that.loading = false;
                    }
                })
            },
            del(row) {
                var that = this;
                that.$confirm("确认删除该信息!", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    $.ajax({
                        type: "GET",
                        url: `${basePath}/sys_user/deleteSysUser`,
                        data: {id: row.id},
                        success: function (data) {
                            if (data.status == 0) {
                                that.$message({
                                    type: "success",
                                    message: "删除成功"
                                });
                                that.handleCurrentChange(1);
                            }
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
            },
        }
    })
</script>
</html>


